<template>
  <el-form :inline="true" :model="form">
    <el-form-item>
      <el-autocomplete
        class="inline-input"
        v-model="form.city"
        :fetch-suggestions="loadCityList"
        placeholder="切换城市"
        :trigger-on-focus="false"
      ></el-autocomplete>
    </el-form-item>
    <el-form-item>
      <el-date-picker
        v-model="time"
        type="daterange"
        range-separator="-"
        start-placeholder="入店日期"
        end-placeholder="离店日期"
        @change="handleSelectTime"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-input
        placeholder="人数未定"
        suffix-icon="el-icon-user"
        v-popover:popover
        v-model="person"
        readonly
      >
      </el-input>
      <el-popover
        ref="popover"
        placement="bottom"
        offsetTop="20"
        width="300"
        trigger="focus"
        v-model="popoverVisible"
      >
        <el-row style="border-bottom: 1px solid #ddd; padding-bottom: 30px">
          <el-col :span="8"> 每间 </el-col>
          <el-col :span="8" style="padding-right: 5px">
            <el-select v-model="bigman" size="mini">
              <el-option
                v-for="item in bigmanOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="8" style="padding-right: 5px">
            <el-select v-model="child" size="mini">
              <el-option
                v-for="item in childOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <div style="text-align: right; margin-top: 30px">
          <el-button type="primary" size="mini" @click="handleSure"
            >确定</el-button
          >
        </div>
      </el-popover>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查看价格</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import moment from "moment";
export default {
  name: "HotelSelect",
  data() {
    return {
      form: {
        city: "",
        enterTime: "",
        leftTime: "",
      },
      pickerOptions: {
        // 禁选今天之前的日期
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      bigmanOptions: [
        {
          value: "1成人",
          label: "1成人",
        },
        {
          value: "2成人",
          label: "2成人",
        },
        {
          value: "3成人",
          label: "3成人",
        },
        {
          value: "4成人",
          label: "4成人",
        },
        {
          value: "5成人",
          label: "5成人",
        },
      ],
      childOptions: [
        {
          value: "0儿童",
          label: "0儿童",
        },
        {
          value: "1儿童",
          label: "1儿童",
        },
        {
          value: "2儿童",
          label: "2儿童",
        },
        {
          value: "3儿童",
          label: "3儿童",
        },
        {
          value: "4儿童",
          label: "4儿童",
        },
        {
          value: "5儿童",
          label: "5儿童",
        },
      ],
      time: "", // 绑定日期
      person: "", // 绑定人数
      bigman: "2成人",
      child: "0儿童",
      popoverVisible: false,
    };
  },
  methods: {
    onSubmit() {
      if (this.form.city === "") {
        this.$message.error("请选择城市");
        return;
      }
      this.$router.push({
        path: "/hotel",
        query: this.form,
      });
      // this.$emit("changeCity", this.form);
    },
    handleSelectTime() {
      this.form.enterTime = moment(this.time[0]).format("YYYY-MM-DD");
      this.form.leftTime = moment(this.time[1]).format("YYYY-MM-DD");
    },
    handleSure() {
      this.popoverVisible = false;
      this.person = this.bigman + " " + this.child;
    },
    loadCityList(queryString, callback) {
      this.$axios
        .get("/airs/city", {
          params: {
            name: queryString,
          },
        })
        .then((res) => {
          const cities = res.data.data.map((item) => {
            return {
              value: item.name,
            };
          });
          callback(cities);
        });
    },
  },
};
</script>

<style scoped lang="less">
.el-form {
  margin-top: 10px;
}
</style>
